<template>
  <div>
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item',item.id==0?'mui-active':'']"
            data-wid="tab-top-subpage-1.html"
            v-for="item in cates"
            :key="item.id"
            @click="getPhotoListByCateId(item.id)"
          >{{item.title}}</a>
        </div>
      </div>
    </div>
    <ul style="list-style-type: none;" class="photo-list">
      <router-link v-for="item in list2" :key="item.id" :to="'/home/photoinfo/'+item.id" tag="li">
        <img v-lazy="item.imgUrl" />
        <div class="info">
          <h1 class="info-title">{{item.title}}</h1>
          <div class="info-body">{{item.desc}}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js";

export default {
  data() {
    return {
      cates: [],
      list: [
        {
          id: 1,
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_140x140_80f63803.jpg",
          title: "故宫",
          desc: "东方宫殿建筑代表，世界宫殿建筑典范"
        },
        {
          id: 2,
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_140x140_abb362a7.jpg",
          title: "南山滑雪场",
          desc: "北京专业级滑雪圣地"
        },
        {
          id: 3,
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1501/f4/f467729126949c3a.water.jpg_140x140_ef235b1c.jpg",
          title: "天安门广场",
          desc: "我爱北京天安门，天安门上太阳升"
        },
        {
          id: 4,
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1501/40/40b2b6c951b28fdd.water.jpg_140x140_1c863e5c.jpg",
          title: "水立方",
          desc: "中国的荣耀，阳光下的晶莹水滴"
        },
        {
          id: 5,
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/201308/23/b283071686e64dfec8d65eac.jpg_140x140_8c5a7c49.jpg",
          title: "温都水城养生馆",
          desc: "各种亚热带植物掩映其间仿佛置身热带雨林"
        },
        {
          id: 6,
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg",
          title: "北京温泉排行榜",
          desc: "细数北京温泉，温暖你的冬天"
        },
        {
          id: 7,
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg",
          title: "北京必游TOP10",
          desc: "来北京必去的景点非这些地方莫属"
        },
        {
          id: 8,
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1505/9e/21df651e19af5d.jpg_r_640x214_3ea5bb38.jpg",
          title: "寻找北京的皇城范儿",
          desc: "数百年的宫廷庙宇，至今依旧威严霸气"
        },
        {
          id: 9,
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1505/ce/bc89bc2f0e33ea.jpg_r_640x214_3e408453.jpg",
          title: "学生最爱的博物馆",
          desc: "周末干嘛？北京很多博物馆已经免费开放啦"
        },
        {
          id: 10,
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1505/b2/fde1bfcd057a52.jpg_r_640x214_bbf3fa44.jpg",
          title: "儿童剧场，孩子的乐园",
          desc: "带宝贝观看演出，近距离体验艺术的无穷魅力"
        }
      ],
      list2: []
    };
  },
  created() {
    this.getAllCategory();
    this.getPhotoListByCateId(0);
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods: {
    getAllCategory() {
      this.cates = [
        { id: 0, title: "全部" },
        { id: 1, title: "居家生活" },
        { id: 2, title: "摄影设计" },
        { id: 3, title: "明星美女" },
        { id: 4, title: "科技新观" },
        { id: 5, title: "知识学习" }
      ];
    },
    getPhotoListByCateId(id) {
      // console.log(id);
      this.list2 = [];
      switch (id) {
        case 0:
          this.list2 = this.list;
          break;
        case 1:
          this.list.forEach((val, index, val_arr) => {
            if (index < 2) {
              this.list2.push(val);
            }
          });
          break;
        case 2:
          this.list.forEach((val, index, val_arr) => {
            if (index > 1 && index < 4) {
              this.list2.push(val);
            }
          });
          break;
        case 3:
          this.list.forEach((val, index, val_arr) => {
            if (index > 3 && index < 6) {
              this.list2.push(val);
            }
          });
          break;
        case 4:
          this.list.forEach((val, index, val_arr) => {
            if (index > 5 && index < 8) {
              this.list2.push(val);
            }
          });
          break;
        case 5:
          this.list.forEach((val, index, val_arr) => {
            if (index > 7 && index < 10) {
              this.list2.push(val);
            }
          });
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
* {
  touch-action: pan-y;
}
.photo-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  padding-bottom: 0;
  li {
    background-color: #ccc;
    text-align: center;
    margin-bottom: 10px;
    box-shadow: 0 0 9px #999;
    position: relative;
    img {
      width: 100%;
      vertical-align: middle;
    }
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }

    .info {
      color: white;
      text-align: left;
      position: absolute;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
      max-height: 84px;
      width: 100%;
      .info-title {
        font-size: 20px;
      }
      .info-body {
        font-size: 13px;
      }
    }
  }
}
</style>